<template>
<view class="page__bd page__bd_bottom">
	<custom-navbar bgColor="bg-white shadow" :isBack="true" :isHome="true">
		<block slot="backText">返回</block>
		<block slot="content">文章详情</block>
	</custom-navbar>
	<view class="daui-article">
		<view class="daui-article__hd">
			<view class="article-title">{{articleInfo.title}}</view>
			<view class="flex article-subinfo">
				<view class="flex-sub">
					<text class="article-author">{{articleInfo.cate_name}}</text>
					<text>{{articleInfo.autotime}}</text>
				</view>
				<view>阅读 {{articleInfo.hit_num}}</view>
			</view>
		</view>
		<view class="daui-article__bd">
			<mp-html :content="articleInfo.content" lazy-load="true" :tag-style="tagStyle">文章详情展示</mp-html>
		</view>
		<view class="daui-flex text-center" style="display: none;">
			<view class="daui-flex__item">
				<button class="daui-btn line-green round" @tap="doPraise">
					<text class="iconfontzz icon-zan1 margin-right-xs"></text>{{articleInfo.praise_num}}赞</button>
			</view>
			<view class="daui-flex__item">
				<button class="daui-btn line-green round" @tap="onShare">
					<text class="iconfontzz icon-fenxiang3 margin-right-xs"></text>分享
				</button>
			</view>
		</view>
	</view>
	<view class="daui-card" style="display: none;">
		<view class="daui-card__hd">
			相关文章
		</view>
		<view class="daui-card__bd">
			<view class="daui-media daui-media_appmsg" v-for="(item,index) in relateArticleList" :key="index" @tap="openArticleDetail(item.id)">
				<view class="daui-media__hd">
					<image :src="item.picurl" mode="widthFix"></image>
				</view>
				<view class="daui-media__bd">
					<view class="daui-media__newstitle">{{item.title}}</view>
					<view class="flex text-grayDark margin-top-xs">
						<view class="flex-sub">
							{{item.cate_name}}
						</view>
						<view>
							{{item.autotime}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="daui-card" style="display: none;">
		<view class="daui-card__hd">
			精彩评论
		</view>
		<view class="daui-card__bd">
			<view class="daui-media daui-media_appmsg daui-media_user margin-top-sm" v-for="(item,index) in commentList" :key="index">
				<view class="daui-media__hd">
					<image :src="item.avatar" mode="widthFix"></image>
				</view>
				<view class="daui-media__bd">
					<view class="daui-cell fom-user">
						<view class="daui-cell__bd">
							<view>{{item.username}}</view>
							<view>{{item.autotime}}</view>
						</view>
					</view>
					<view class="view-content">{{item.content}}</view>
				</view>
			</view>
			<view class="daui-load" :class="!loadding?'loading':'over'"><view class="daui-load-in"><view class="daui-nomore-text"></view></view></view>
		</view>
	</view>
	
	<!-- 评论框 -->
	<view class="daui-bar input foot solid-top" style="display: none;">
		<view class="daui-avatar round" :style="'background-image:url('+moonInfo.avatar+');'" @click="checkLogin"></view>
		<input @focus="InputFocus" @blur="InputBlur" v-model="commentContent" :adjust-position="false" class="" maxlength="300" cursor-spacing="10"></input>
		<button class="daui-btn bg-green" @tap="doComment">发送</button>
		<view class="action text-orange" @tap="doPraise">
			<view class="iconfontzz icon-zan"></view>
		</view>
		<view class="action text-orange" @tap="onShare">
			<view class="iconfontzz icon-share"></view>
		</view>
	</view>
	
	<!-- 分享弹窗 -->
	<uni-popup ref="sharePopup" type="bottom">
		<share-btn :sharedataTemp="sharedata"></share-btn>
	</uni-popup>
	
	<!--toast提示-->
	<daui-toast ref="toast"></daui-toast>
</view>
</template>

<script>
import danceuiTool from '../../utils/danceuiTool';
import http from "../../server/api-index.js";
import mpHtml from '@/components/mp-html/mp-html';
export default {
	components:{
		mpHtml
	},
	data() {
		return {
			tagStyle: {'img':'float:left'},
			moonInfo: {},
			arid: 0,
			articleInfo: {},
			commentList: [],
			commentContent: '',
			InputBottom: 0,
			loadding: false,
			pullUpOn: true,
			relateArticleList: [],
			sharedata: {
				type: 1,
				strShareTitle: "分享标题",
				strShareSummary: "分享总结",
				strShareUrl: "https://www.xdffresh.com",
				strShareImageUrl: "https://www.xdffresh.com/appres/icon.png"
			},
		}
	},
	onLoad(options) {
		console.log('onLoad的参数:', options);
		this.arid = options.arid;
		this.list_param = {arid: options.arid};
		this.getData();
	},
	onReachBottom: function() {
		if (!this.pullUpOn) return;
		this.loadding = true;
		if (this.pageIndex == 4) {
			this.loadding = false;
			this.pullUpOn = false;
		} else {
			let loadData = JSON.parse(JSON.stringify(this.productList));
			loadData = loadData.splice(0, 10);
			if (this.pageIndex == 1) {
				loadData = loadData.reverse();
			}
			this.commentList = this.commentList.concat(loadData);
			this.pageIndex = this.pageIndex + 1;
			this.loadding = false;
		}
	},
	methods: {
		async getData() { //请求并获取数据
			const token = uni.getStorageSync('token');
			let headers = {"Authorization":"Bearer "+token};
			let ret = await http.articleDetail(this.$refs.toast, this.list_param, headers);
			var retData = ret.data;
			console.log('articleDetail页面,获取到的数据:', retData);
			this.moonInfo = retData.moonInfo;
			if(retData.shareInfo){
				this.sharedata.strShareTitle = retData.shareInfo.title;
				this.sharedata.strShareSummary = retData.shareInfo.desc;
				this.sharedata.strShareUrl = retData.shareInfo.link;
				if(retData.shareInfo.icon){
					this.sharedata.strShareImageUrl = retData.shareInfo.icon;
				}
			}
			console.log('sharedata:', this.sharedata);
			this.articleInfo = retData.articleInfo;
			this.commentList = retData.commentList;
			this.relateArticleList = retData.relateArticleList;
			this.loadding = true;
		},
		checkLogin(){
			console.log('checkLogin,moonInfo:', this.moonInfo)
			if(this.moonInfo.id == 0){
				uni.showModal({
					title: '您尚未登录',
					content: '请先登陆再进行操作',
					confirmText: '登陆',
					cancelText: '取消',
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/user/login'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		//富文本展示相关
		ready(e) {
			console.log('ready', e);
			// console.log('api: getText', this.$refs.article.getText());
			//console.log('imgList', this.$refs.article.imgList);
		},
		imgtap(e) {
			console.log('imgtap', e);
		},
		linkpress(e) {
			console.log('linkpress', e);
		},
		error(e) {
			console.error(e);
		},
		openArticleDetail(arid) {
			uni.navigateTo({
				url: '/pages/article/articleDetail?arid='+arid
			})
		},
		async doPraise(){ //请求并获取数据,点赞
			const token = uni.getStorageSync('token');
			let headers = {"Authorization":"Bearer "+token};
			var param = {
				arid: this.arid
			};
			let ret = await http.doPraise(this.$refs.toast, param, headers, 1);
			var retData = ret.data;
			console.log('doPraise操作,获取到的数据：', retData);
			this.getData();
		},
		InputFocus(e) {
			this.checkLogin();
			this.InputBottom = e.detail.height
		},
		InputBlur(e) {
			this.InputBottom = 0
		},
		async doComment(){ //请求并获取数据,评论
			const token = uni.getStorageSync('token');
			let headers = {"Authorization":"Bearer "+token};
			var param = {
				arid: this.arid,
				content: this.commentContent
			};
			let ret = await http.doComment(this.$refs.toast, param, headers, 1);
			var retData = ret.data;
			console.log('doComment操作,获取到的数据:', retData);
			if(typeof retData != "undefined"){
				this.commentContent = '';
				danceuiTool.showToast(this.$refs.toast, retData.msg, '', true);
				setTimeout(() => {
					this.getData();
				}, 200);
			}
		},
		onShare(){
			this.$refs.sharePopup.open();
		},
	}
}
</script>

<style>
</style>
